<template>
  <div class="app-container">
    <!-- <health-card>
      站点健康度
    </health-card> -->

    <el-card shadow="always">
      <el-form :model="queryParams" :inline="true" label-width="100px">
        <el-form-item label="网络制式：" prop="networkType">
          <el-select v-model="queryParams.networkType" placeholder="请选择网络制式" clearable style="width: 240px">
            <el-option v-for="dict in nhp_network_type" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属区县：" prop="county">
          <el-select v-model="queryParams.county" placeholder="请选择所属区县" clearable style="width: 240px">
            <el-option v-for="dict in nhp_county_type" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="GGI：" prop="cgi">
          <el-input v-model="queryParams.cgi" placeholder="请输入CGI" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item label="小区名称：" prop="cellName">
          <el-input v-model="queryParams.cellName" placeholder="请输入小区名称" clearable style="width: 240px" />
        </el-form-item>
        <el-form-item label="创建时间：" prop="createTime">
          <el-date-picker v-model="queryParams.createStartEnd" type="daterange" start-placeholder="开始时间"
            end-placeholder="结束时间" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="listStationSummary">查询</el-button>
          <el-button><el-icon>
              <RefreshRight />
            </el-icon>重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="always" style="margin-top: 10px; min-height: 500px; padding-bottom: 20px">
      <el-row>
        <!-- <el-button type="primary" icon="Download" @click="refExportDialog.show(queryParams)">导出</el-button> -->
      </el-row>
      <div id="table" style="margin-top: 20px">
        <el-table v-loading="loading" ref="qualityTable" :data="tableData" style="width: 100%"
          @filter-change="filterChange">
          <el-table-column prop="county" label="所属区县" width="100" align="center" fixed />
          <el-table-column prop="cgi" label="CGI" width="180" align="center" fixed />
          <el-table-column prop="neName" label="小区名称" width="180" align="center" fixed />
          <el-table-column prop="insertTime" label="创建日期" :formatter="dateFormatter" width="120" fixed align="center" />
          <el-table-column prop="status" label="状态" width="150" align="center" :filter-multiple="false" :filters="[
            { text: '正常', value: 1 },
            { text: '数据不完整', value: 2 },
          ]" :column-key="'status'" filter-placement="bottom-end">
            <template #default="scope">
              <el-tag :type="scope.row.status == '1' ? 'success' : 'danger'" disable-transitions>{{ scope.row.status ==
                "1" ? "正常" : "数据不完整" }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="quality" label="网络质量" width="120" align="center" />
          <el-table-column prop="alarm" label="故障告警" width="120" align="center" />
          <el-table-column prop="env" label="基站环境" width="120" align="center" />
          <el-table-column prop="profit" label="价值收益" width="120" align="center" />
          <el-table-column prop="perception" label="用户感知" width="120" align="center" />
          <el-table-column fixed="right" prop="total" label="健康度总分" width="120" align="center" />
          <el-table-column fixed="right" label="操作" align="center" min-width="200">
            <template #default="scope">
              <el-button link type="primary" size="small"
                @click="showHealthDetail(scope.row.cgi, scope.row.insertTime)">详情</el-button>
              <el-button link type="primary" size="small" @click="linkToGis(scope.row.cgi)">跳转GIS</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 50, 100, 200]"
          layout="total, sizes, prev, pager, next" :total="total" @size-change="listStationSummary"
          @current-change="listStationSummary" /> -->
        <pagination v-show="total > 0" :autoScroll="false" :total="total" v-model:page="currentPage"
          v-model:limit="pageSize" @pagination="listStationSummary" />
      </div>
    </el-card>

    <export-dialog ref="refExportDialog" @directExport="exportData" />
  </div>
</template>

<script setup name="stationHealth">
import {
  queryStationSummaryList,
  queryStationSummary,
  queryStationOverview
} from "@/api/biz/stationHealth";

/* import mittBus from "@/utils/mittBus"; // mitt - 组件传参工具
mittBus.emit("setWaterMarker", 130); */

const refExportDialog = ref(null)

const { proxy } = getCurrentInstance();
const { nhp_county_type, nhp_network_type } = proxy.useDict(
  "nhp_county_type",
  "nhp_network_type"
);
const router = useRouter();
const nowStatus = ref();

const dataOverview = () => {
  queryStationOverview().then(res => {
    let data = res.data

    if (data.dateTime) {
      let current = new Date().getTime() - 24 * 60 * 60 * 1000
      queryParams.value.createStartEnd = [new Date(current), new Date()]
      listStationSummary()
    }
  })
}
dataOverview()

const exportData = () => {
  console.log("直接导出")
  /* const param = {};
  param.county = queryParams.value.county;
  param.cgi = queryParams.value.cgi;
  param.ENODEBID = queryParams.value.ENODEBID;
  param.cellName = queryParams.value.cellName;
  param.createStart = formatDate(datePicker.value[0]);
  param.createEnd = formatDate(datePicker.value[1]);
  param.sortContent = nowSortContent.value;
  param.order = nowOrder.value;
  param.status = nowStatus.value;
  param.networkType = queryParams.value.networkType
  proxy.download("/networkQuality/exportQualityList", {
    ...param
  }, `网络质量_${new Date().getTime()}.xlsx`); */
}

let loading = ref(false)

const queryParams = ref({
  networkType: "4G",
  exportType: '工单导出'
});

const pageSize = ref(10);
const currentPage = ref(1);
const total = ref(0);
const tableData = ref([]);

function listStationSummary() {
  loading.value = true;
  const param = {};
  param.pageSize = pageSize.value;
  param.pageNum = currentPage.value;
  param.county = queryParams.value.county;
  param.cgi = queryParams.value.cgi;
  param.netType = queryParams.value.networkType;
  param.neName = queryParams.value.cellName;
  if (
    queryParams.value.createStartEnd &&
    queryParams.value.createStartEnd.length > 0
  ) {
    param.startTime = queryParams.value.createStartEnd[0].toLocaleDateString();
    param.endTime = queryParams.value.createStartEnd[1].toLocaleDateString();
  }
  param.status = 1;
  queryStationSummaryList(param).then((res) => {
    tableData.value = res.rows;
    total.value = res.total;

    loading.value = false;
  });
}

function showHealthDetail(cgi, insertTime) {
  let temp = dateFormatter(null, null, insertTime, null);
  router.push({
    path: "/health/stationHealthDetail",
    query: { cgi: cgi, insertTime: temp },
  });
}

function linkToGis(cgi, insertTime) {
  router.push({
    path: "/gis",
    query: { cgi }, // 请求参数在这
  });
}

function dateFormatter(row, column, cellValue, index) {
  if (!cellValue) {
    return;
  }
  // 创建一个新的 Date 对象
  var originalDate = new Date(cellValue);

  // 获取年、月、日、时、分、秒
  var year = originalDate.getFullYear();
  var month = ("0" + (originalDate.getMonth() + 1)).slice(-2);
  var day = ("0" + originalDate.getDate()).slice(-2);
  var hours = ("0" + originalDate.getHours()).slice(-2);
  var minutes = ("0" + originalDate.getMinutes()).slice(-2);
  var seconds = ("0" + originalDate.getSeconds()).slice(-2);

  // 格式化输出
  var formattedDateTimeString = year + "-" + month + "-" + day;
  return formattedDateTimeString;
}

function filterChange(filters) {
  // console.log(filters.status[0]);
  nowStatus.value = filters.status[0];
  listStationSummary();
}

// listStationSummary();
</script>
